<nav class="navbar navbar-expand-sm navbar-dark bg-dark sticky-top" id="site-navbar">
  <a class="navbar-brand" href="#" routerLink="/">
    <img id="navbar-img" src="assets/images/NXX-2.png">
  </a>
  <button class="navbar-toggler" type="button" (click)="isMenuCollapsed = !isMenuCollapsed">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div [ngbCollapse]="isMenuCollapsed" class="collapse navbar-collapse">
    <ul class="navbar-nav">
      <li class="nav-item" (click)="isMenuCollapsed = !isMenuCollapsed">
        <a class="nav-link" routerLink="/">
          <mat-icon aria-hidden="false">home</mat-icon>
          {{'NAV.HOME' | translate}}
        </a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" role="button" data-toggle="dropdown">
          <mat-icon aria-hidden="false">calculate</mat-icon>
          {{'NAV.CALCULATOR' | translate}}
        </a>
        <div class="dropdown-menu bg-dark" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" routerLink="/card-calculator" (click)="isMenuCollapsed = !isMenuCollapsed">{{'NAV.CARD-POWER' |
            translate}}</a>
          <a class="dropdown-item" routerLink="/card-rss-calculator" (click)="isMenuCollapsed = !isMenuCollapsed">{{'NAV.CARD-RSS' |
            translate}}</a>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" role="button" data-toggle="dropdown">
          <mat-icon aria-hidden="false">view_list</mat-icon>
          {{'NAV.INDEX' | translate}}
        </a>
        <div class="dropdown-menu bg-dark" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" routerLink="/cards" (click)="isMenuCollapsed = !isMenuCollapsed">{{'NAV.CARD-LIST' | translate}}</a>
          <a class="dropdown-item" routerLink="/skills" (click)="isMenuCollapsed = !isMenuCollapsed">{{'NAV.SKILL-LIST' | translate}}</a>
          <!-- <div class="dropdown-divider"></div> -->
          <a class="dropdown-item" routerLink="/vision-history" (click)="isMenuCollapsed = !isMenuCollapsed">{{'NAV.VISION-HISTORY' |
            translate}}</a>
          <a class="dropdown-item" routerLink="/merch-list" (click)="isMenuCollapsed = !isMenuCollapsed">{{'NAV.MERCH-LIST' |
            translate}}</a>
        </div>
      </li>
      <li class="nav-item" (click)="isMenuCollapsed = !isMenuCollapsed">
        <a class="nav-link" routerLink="/other">
          <mat-icon aria-hidden="false">info</mat-icon>
          {{'NAV.OTHER' | translate}}
        </a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" role="button" data-toggle="dropdown">
          <mat-icon aria-hidden="false">translate</mat-icon>
          {{'NAV.LANGUAGE' | translate}}
        </a>
        <div class="dropdown-menu bg-dark text-white" aria-labelledby="navbarDropdown">
          <form id="language-form">
            <fieldset id="language">
              <label><input type="radio" [(ngModel)]="language" value="zh" (ngModelChange)="changeLanguage()"
                  name="language">中文</label><br />
              <label><input type="radio" [(ngModel)]="language" value="en" (ngModelChange)="changeLanguage()"
                  name="language">English</label><br />
              <label><input type="radio" [(ngModel)]="language" value="ko" (ngModelChange)="changeLanguage()"
                  name="language">한국어</label>
            </fieldset>
          </form>
        </div>
      </li>
    </ul>
  </div>
</nav>